/*
 * @Author: Zeratul
 * @Date: 2020-08-26 19:03:38
 * @LastEditTime: 2020-08-28 13:40:05
 * @FilePath: \sz-h5-2003-react-mobile\zhangminhui\eleme-react\eleme-user\src\pages\ChatPage\index.js
 */
import React, { Component } from "react";
import io from "socket.io-client";
import styles from "./index.module.scss";
import { NavBar } from "antd-mobile";
import { connect } from "react-redux";
import { getSocketMessageAction, changeInputValueAction, sendMessageAction } from "../../store/actionCreator";
import ChatMessage from "../../components/ChatMessage";
import { withRouter } from "react-router-dom";
import Lazy from "../../utils/imgLazyLoad";
let socket;
class ChatPage extends Component {
  componentDidMount() {
    socket = io("http://175.24.122.212:7777");
    // socket.emit("userLogin", { username: this.props.userName });
    let that = this;
    socket.on("msg-from-server", function (data) {
      that.props.getSocketMessage(data);
    });
    // socket.emit('msg-from-client',{username:this.props.userName,msg:this.props.inpValue})
  }
  sendMessage=(text)=>{
    socket.emit('msg-from-client',{username:this.props.userName,msg:text})
  }
  render() {
    return (
      <div className={styles.chatPage}>
        {/* chat header开始 */}
        <div className={styles.chatPageHead}>
          <NavBar
            mode="light"
            leftContent={
              <svg className="icon" aria-hidden="true">
                <use href="#icon-zuojiantou-copy"></use>
              </svg>
            }
            rightContent={
              <svg className="icon" aria-hidden="true">
                <use href="#icon-Telephone-copy"></use>
              </svg>
            }
            onLeftClick={
              ()=>{
                this.props.history.push('/orderdetail')
              }
            }
          ></NavBar>
          <div className={styles.shopInfo}>
            <div className={styles.shopImg}>
              <Lazy className="pic" src="http://175.24.122.212:9090/uploads/6666/resize_w_150.jpg" alt=""></Lazy>
            </div>
            <div className={styles.shopInfoM}>
              <h3>{'订单已送达'}</h3>
              <p>{'肯德基'}</p>
            </div>
            <span>打赏骑士</span>
          </div>
        </div>
        {/* chat header 结束 */}
        <div className={styles.chatContent} id="chatContent">
          {
          this.props.message.map((item) => {
            return <ChatMessage  chatMes={item} key={item.time}></ChatMessage>;
          })
          }
        </div>
        <div className={styles.cartBottom}>
          <div className={styles.Btn}>
            <svg className="icon" aria-hidden="true">
              <use href="#icon-huatong"></use>
            </svg>
          </div>
          <div className={styles.input}>
            <input type="text" placeholder="请输入内容..." 
            value={this.props.inpValue}
            onChange={(e)=>{
                this.props.changeInputValue(e.target.value)
              }}></input>
          </div>
          <div className={styles.Btn} onClick={()=>{
            this.props.sendMessage(this.props.inpValue)
            this.sendMessage(this.props.inpValue)
            }}>
            <svg className="icon" aria-hidden="true">
              <use href="#icon-menu"></use>
            </svg>
          </div>
          <div className={styles.Btn}>
            <svg className="icon" aria-hidden="true">
              <use href="#icon-jia1"></use>
            </svg>
          </div>
        </div>
      </div>
    );
  }
}
const mapStateToProps = (state) => {
  console.log(state.loginReducer.userInfo['0'])
  return {
    userName: state.loginReducer.userInfo['0'].username,
    shopName: state.orderReducer.orderList.shop,
    message: state.chatReducer.message,
    inpValue:state.chatReducer.inpValue,
  };
};
const mapDispatchToProps = (dispatch) => {
  return {
    handleChangeInput: (params) => {},
    getSocketMessage: (params) => {
      console.log(params);
      dispatch(getSocketMessageAction(params));
    },
    changeInputValue:function(text){
      dispatch(changeInputValueAction(text))
    },
    sendMessage:function(){
      dispatch(sendMessageAction())
    }
  };
};
export default connect(mapStateToProps, mapDispatchToProps)(withRouter(ChatPage));
